<template>
    <div class="box">
        <div>
            <!-- <van-button type="primary" text="显示遮罩层" @click="show = true" /> -->
            <van-overlay :show="show" @click="show = false">
                <!-- 头部 -->
                <div class="header">
                    <HeaderView>
                        <template v-slot:center>
                        <div class="header_box_main">
                            扫码核销
                        </div>  
                        </template>
                        <template v-slot:right>
                        <div class="header_box_right" @click="toManualWriteOff">
                            手动核销
                        </div>  
                        </template>
                    </HeaderView>
                </div>

                <!-- 扫描区域 -->
                <div class="wrapper" @click.stop>
                    <div class="rect">
                        <div class="block">
                            <van-icon name="bulb-o" />
                        </div>
                    </div>
                    <p>将二维码放入框内，即可自动扫描</p>
                    <button @click="toScanSuccess">扫描成功></button>
                </div>
            </van-overlay>
        </div>
    </div>
</template>
<style scoped>
    .box{
        background: #808080;
    }
    .header{
        z-index: 99;
    }
    .header_box_main{
        background: #ff6e53;
        width: 100px;
        text-align: center;
        margin:0 auto;
    }
    .header_box_right{
        margin-right: 15px;
    }
    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        flex-direction: column;
    }
    .block {
        width: 200px;
        height: 200px;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: flex-end; 
    }
    .rect {
        width: 220px;
        height: 220px;
        background-color: #fff;
        background: linear-gradient(to left, #fff, #fff) left top no-repeat, 
                    linear-gradient(to bottom, #fff, #fff) left top no-repeat, 
                    linear-gradient(to left, #fff, #fff) right top no-repeat,
                    linear-gradient(to bottom, #fff, #fff) right top no-repeat, 
                    linear-gradient(to left, #fff, #fff) left bottom no-repeat,
                    linear-gradient(to bottom, #fff, #fff) left bottom no-repeat,
                    linear-gradient(to left, #fff, #fff) right bottom no-repeat,
                    linear-gradient(to left, #fff, #fff) right bottom no-repeat;
        background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px;  
        display: flex;
        justify-content: center;
        align-items: center;
    }

</style>
<script>
    import HeaderView from '@/components/header1View.vue';
    export default{
        data(){
            return{
                show: true
            }
        },
        methods:{
            toManualWriteOff(){   //手动核销
                this.$router.push('./ManualWriteOff')
            },
            toScanSuccess(){ //扫描成功
                this.$router.push('./ScanSuccess')
            }
        },
        components:{
            HeaderView
        }
    }
</script>